import React from 'react';

import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, Form, Input, Select } from 'antd';

export default function Outbound() {
	const columns = [
		{ title: '单据编码', dataIndex: 'documentCode', key: 'documentCode' },
		{ title: '往来单位', dataIndex: 'contactUnit', key: 'contactUnit' },
		{ title: '出库类型', dataIndex: 'outboundType', key: 'outboundType' },
		{ title: '出库仓库', dataIndex: 'outWarehouse', key: 'outWarehouse' },
		{ title: '预计出库量', dataIndex: 'expectedOutboundQty', key: 'expectedOutboundQty' },
		{ title: '实际出库量', dataIndex: 'actualOutboundQty', key: 'actualOutboundQty' },
		{ title: '出库状态', dataIndex: 'outboundStatus', key: 'outboundStatus' },
		{ title: '出库时间', dataIndex: 'outboundTime', key: 'outboundTime' },
		{ title: '备注', dataIndex: 'remarks', key: 'remarks' },
		{ title: '操作', dataIndex: 'operation', key: 'operation' }
	];

	const dataSource = [
		{
			key: '1',
			documentCode: 'DOC001',
			contactUnit: '公司A',
			outboundType: '销售出库',
			outWarehouse: '仓库1',
			expectedOutboundQty: 100,
			actualOutboundQty: 90,
			outboundStatus: '已出库',
			outboundTime: '2024-11-01 10:00:00',
			remarks: '正常出库',
			operation: []
		},
		{
			key: '2',
			documentCode: 'DOC002',
			contactUnit: '公司B',
			outboundType: '退货',
			outWarehouse: '仓库2',
			expectedOutboundQty: 50,
			actualOutboundQty: 50,
			outboundStatus: '待出库',
			outboundTime: '2024-11-02 11:30:00',
			remarks: '退货处理',
			operation: []
		},
		{
			key: '3',
			documentCode: 'DOC003',
			contactUnit: '公司C',
			outboundType: '销售出库',
			outWarehouse: '仓库3',
			expectedOutboundQty: 200,
			actualOutboundQty: 200,
			outboundStatus: '待出库',
			outboundTime: '2024-11-03 09:00:00',
			remarks: '订单发货',
			operation: []
		},
		{
			key: '4',
			documentCode: 'DOC004',
			contactUnit: '公司D',
			outboundType: '赠品出库',
			outWarehouse: '仓库1',
			expectedOutboundQty: 30,
			actualOutboundQty: 25,
			outboundStatus: '部分出库',
			outboundTime: '2024-11-04 14:20:00',
			remarks: '赠品发放',
			operation: []
		},
		{
			key: '5',
			documentCode: 'DOC005',
			contactUnit: '公司E',
			outboundType: '销售出库',
			outWarehouse: '仓库2',
			expectedOutboundQty: 150,
			actualOutboundQty: 150,
			outboundStatus: '部分出库',
			outboundTime: '2024-11-05 16:00:00',
			remarks: '订单发货',
			operation: []
		},
		{
			key: '6',
			documentCode: 'DOC006',
			contactUnit: '公司F',
			outboundType: '退货',
			outWarehouse: '仓库3',
			expectedOutboundQty: 60,
			actualOutboundQty: 60,
			outboundStatus: '已出库',
			outboundTime: '2024-11-06 13:00:00',
			remarks: '退货处理',
			operation: []
		},
		{
			key: '7',
			documentCode: 'DOC007',
			contactUnit: '公司G',
			outboundType: '销售出库',
			outWarehouse: '仓库1',
			expectedOutboundQty: 120,
			actualOutboundQty: 115,
			outboundStatus: '已出库',
			outboundTime: '2024-11-07 15:30:00',
			remarks: '正常出库',
			operation: []
		},
		{
			key: '8',
			documentCode: 'DOC008',
			contactUnit: '公司H',
			outboundType: '赠品出库',
			outWarehouse: '仓库2',
			expectedOutboundQty: 40,
			actualOutboundQty: 40,
			outboundStatus: '已出库',
			outboundTime: '2024-11-08 10:00:00',
			remarks: '赠品发放',
			operation: []
		},
		{
			key: '9',
			documentCode: 'DOC009',
			contactUnit: '公司I',
			outboundType: '销售出库',
			outWarehouse: '仓库3',
			expectedOutboundQty: 300,
			actualOutboundQty: 280,
			outboundStatus: '已出库',
			outboundTime: '2024-11-09 12:00:00',
			remarks: '订单发货',
			operation: []
		},
		{
			key: '10',
			documentCode: 'DOC010',
			contactUnit: '公司J',
			outboundType: '退货',
			outWarehouse: '仓库1',
			expectedOutboundQty: 90,
			actualOutboundQty: 85,
			outboundStatus: '已出库',
			outboundTime: '2024-11-10 09:45:00',
			remarks: '退货处理',
			operation: []
		}
	];

	return (
		<div>
			<BoxItem>
				<Button size="large" style={{ marginRight: '20px' }}>
					导入
				</Button>
				<Button size="large">导出</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item label="往来单位" style={{ width: '250px' }} wrapperCol={{ span: 17 }}>
						<Input placeholder="请输入关键词" />
					</Form.Item>
					<Form.Item label="出库类型" style={{ width: '200px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="出库状态" style={{ width: '200px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="出库仓" style={{ width: '150px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item>
						<Button type="primary" style={{ marginRight: '20px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>
			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
